<template>
	<view>
		<view class="swiper">
			<swiper indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#45AA8C" :autoplay="autoplay"
			 interval="2000" duration="500" style="height: 400upx">
				<swiper-item v-for="(image,key) in detail.images" :key="key">
					<image :src="image" mode="aspectFill" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="info-row">
				<text class="info-name">
					{{detail.name}}
				</text>
				<text class="info-price">
					￥{{detail.price}}
				</text>
			</view>
			<view class="info-row">
				<text class="info-count">
					{{detail.volumn}}人已购买
				</text>
				<text class="info-store-price">
					门店价：￥{{detail.shop_price}}
				</text>
		
			</view>
		</view>
		<view class="card">
			<view class="card-title">
				<image src="../../../static/wallet.png" mode="" style="width: 36upx;height:32upx;float: left;margin-top: 5upx;margin-right: 5upx;"></image>
				以下项目任选{{detail.count}}次，有效期{{detail.expire}}个月
			</view>
			<view class="card-list">
				<view class="item" v-for="(service,key) in detail.services" :key="key">
					<view class="item-title">
						{{service.name}}
					</view>
					<view class="item-price">
						原价：{{service.shop_price}}
					</view>
				</view>
		
			</view>
		</view>
		
		<view class="discount" v-if="detail.discount">
			<view class="discount-title">
				{{detail.discount.name}}
			</view>
			<view class="discount-content">
				{{detail.discount.introduce}}
			</view>
			<view style="flex: 1;"></view>
			<uni-icon type="arrowright" color="#ABABAB"></uni-icon>
		</view>
		<view class="store">
			<view class="store-title">
				销售门店
			</view>
			<view class="store-content">
				{{detail.shop_name}}
			</view>
			<uni-icon type="arrowright" color="#ABABAB"></uni-icon>
		</view>
		<view class="detail">
			<rich-text :nodes="detail.detail"></rich-text>
		</view>
		<view class="bottom">
			<button class="bottom-btn share-btn" @click="contract">
				<image class="bottom-icon" src="../../../static/store/contact.png"></image>
				<view class="bottom-text">
					客服
				</view>
			</button>
			<button class="bottom-btn share-btn" open-type="share">
				<image class="bottom-icon" src="../../../static/store/share.png"></image>
				<view class="bottom-text">
					分享
				</view>
			</button>
			<button class="buy-btn">
				请至门店开通
			</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		data() {
			var isLogin = uni.getStorageSync("token") != null && uni.getStorageSync("token") != "";
			return {
				id: 0,
				shop_id: 0,
				detail: {},
				cart_number: 0,
				isLogin: isLogin,
				nearby: {
					id: 0,
					name: "获取中",
					address: "获取中",
					phone: "",
					longitude: "",
					latitude: "",
				},
			};
		},
		onShareAppMessage: function(res) {
			console.log(JSON.stringify(res));
		},
		onLoad: function(e) {
			var title = "";
			this.id = e.id;
			this.shop_id = e.shop_id;
			this.getDetail()
		},
		onShow: function() {
			var shop = uni.getStorageSync("selectedShop");
			uni.removeStorageSync("selectedShop");
			if (shop) {
				this.nearby = shop;
			}
		},
		methods: {
			
			getDetail: function() {
				uni.showLoading({
					title: "加载中"
				});
				var that = this;
				that.ajax("/card/detail/",{
					id: this.id,
					store_id: this.shop_id,
				},function(res){
					that.detail = res.data.data;
				});
			},
			contract: function() {
				uni.makePhoneCall({
					phoneNumber: this.detail.shop_phone,
				})
			},
		},
		components: {
			uniIcon
		},

	}
</script>

<style>
	@import "../../../common/icon.css";

	.swiper {
		padding:28upx;
		height: 400upx;
		border-radius: 24upx;
	}

	.swiper-image {
		width: 100%;
		height: 400upx;
		border-radius: 12upx;
	}

	.info {
		padding: 28upx;
		padding-top: 0;
	}

	.info-title {
		font-size: 32upx;
		color: #4B4B4B;
	}

	.info-detail {
		display: flex;
		flex-direction: row;
		align-content: space-around;
		align-items: center;
	}

	.info-price {
		color: #FF7465;
		font-size: 36upx;
	}
	.info-name{
		color: #4B4B4B;
		font-size: 32upx;
	}
	.info-row {
		display: flex;
		flex-direction: row;
		color: #b4b4b4;
		font-size: 28upx;
		align-content: space-around;
		align-items: center;
		justify-content: space-between;
	}

	.card {
		background: #FFFFFF;
		padding: 0 25upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		margin:0 16upx;
		border-radius: 12upx;
	}

	.card-title {
		font-size: 28upx;
		color: #8B8B8B;
		padding: 32upx 0;
		border-bottom: 1upx dotted #DDDDDD;
		position: relative;
	}
	.card-title:before{
		content: '';
		width: 16upx;
		height: 26upx;
		background: #F2F2F2;
		border-top-right-radius: 13upx;
		border-bottom-right-radius: 13upx;
		position: absolute;
		bottom: -13upx;
		left: -24upx;
	}
	.card-title:after{
		content: '';
		position: absolute;
		width: 16upx;
		height: 26upx;
		background: #F2F2F2;
		border-top-left-radius: 13upx;
		border-bottom-left-radius: 13upx;
		bottom: -13upx;
		right: -24upx;
	}
	.card-list {
		padding: 25upx 0;
	}

	.item {
		display: flex;
		flex-direction: row;
		padding: 26upx 24upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
		margin-bottom: 24upx;
	}

	.item-title {
		flex: 1;
		color: #4B4B4B;
		font-size: 28upx;
	}

	.item-price {
		flex: 1;
		text-align: right;
		font-size: 28upx;
		color: #ABABAB;
	}
	.discount {
		background: #FFFFFF;
		margin: 30upx 20upx 0 20upx;
		display: flex;
		flex-direction: row;
		padding: 32upx 24upx;
		align-content: center;
		align-items: center;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}

	.discount-title {
		color: #4B4B4B;
		font-weight: 800;
		font-size: 28upx;

	}

	.discount-content {
		display: inline-block;
		margin-left: 18upx;
		background: #45AA8C;
		font-size: 20upx;
		padding: 5upx 15upx;
		border-radius: 8upx;
		color: #FFFFFF;
	}


	.store {
		background: #FFFFFF;
		margin: 30upx 20upx 0 20upx;
		display: flex;
		flex-direction: row;
		align-content: center;
		align-items: center;
		padding: 32upx 24upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}

	.store-title {
		color: #4B4B4B;
		font-size: 30upx;
		flex: 1;
	}

	.store-content {
		display: inline-block;
		font-size: 26upx;
		color: #bfbfbf;
		width: 390upx;
		white-space: nowrap;
		text-align: right;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.comment {
		background: #FFFFFF;
		margin: 30upx 20upx 0 20upx;
		padding: 32upx 24upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}
	
	.comment-header {
		display: flex;
		flex-direction: row;
	}
	
	.comment-title {
		color: #4B4B4B;
		font-size: 28upx;
		flex: 1;
	}
	
	.comment-count {
		font-size: 24upx;
		padding: 2upx;
		color: #ABABAB;
		flex: 1;
		text-align: right;
	}
	
	.comment-item {
		padding: 45upx 12upx 30upx 22upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		margin-top: 24upx;
		border-radius: 12upx;
	}
	
	.comment-user {
		display: flex;
		flex-direction: row;
	}
	
	.comment-avatar {
		width: 92upx;
		height: 92upx;
		border-radius: 50%;
	}
	
	.comment-userinfo {
		margin-left: 22upx;
		color: #4B4B4B;
		font-size: 28upx;
	}
	
	.comment-phone {
		font-size: 24upx;
		color: #8B8B8B;
	}
	
	.comment-stars {
		margin-left: 35upx;
		display: inline-block;
	}
	
	.comment-score {
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.comment-content {
		font-size: 24upx;
	}
	
	.comment-scores {
		font-size: 25upx;
		margin: 40upx 0;
		margin-left: 90upx;
	}
	
	.comment-image {
		margin-bottom: 10upx;
	}
	
	.comment-image {
		width: 160upx;
		height: 160upx;
		border-radius: 15upx;
		margin-right: 30upx;
	}
	
	.comment-time {
		color: #ABABAB;
		font-size: 24upx;
		margin-top: 10upx;
		text-align: right;
	}

	.bottom {
		width: 96%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		padding: 10upx 2%;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		background: #FFFFFF;
		align-content: center;
		align-items: center;
		z-index: 1000;
	}

	.bottom-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
	}

	.bottom-icon {
		width: 38upx;
		height: 38upx;
		margin-top: 5upx;
		margin-bottom: 10upx;
	}

	.bottom-text {
		font-size: 22upx;
		color: #272727;
	}

	.buy-btn {
		width: 450upx;
		color: #ffffff;
		background: #45AA8C;
		text-align: center;
		font-size: 32upx;
		border-radius: 12upx;
		padding: 25upx 0;
		line-height: 1;
		margin: 0;
	}

	.cart-btn {
		width: 225upx;
		background: #f7b43d;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.buy-btn:after {
		border: none;
	}

	.detail {
		margin-top: 30upx;
		margin-bottom: 80upx;
		background: #FFFFFF;
	}

	.detail-image {
		width: 100%;
	}

	.share-btn {
		background: none;
		border: none;
		margin: 0;
		padding: 0;
		line-height: 1;
	}

	.share-btn:after {
		border: none;
	}

	.cart-button {
		position: fixed;
		bottom: 130upx;
		right: 20upx;
		height: 100upx;
		width: 100upx;
		background: linear-gradient(0, #f4d247, #f6c344);
		border-radius: 50upx;
	}

	.cart-icon {
		width: 48upx;
		height: 40upx;
		margin-top: 30upx;
		margin-left: 26upx;
	}

	.cart-dot {
		position: absolute;
		top: -5upx;
		right: 0;
		background: #feea7e;
		border-radius: 20upx;
		font-size: 20upx;
		padding: 5upx 13upx;
		color: #fd7f33;
		display: inline-block;
	}
</style>
